import { Routes, Route, Link } from 'react-router-dom'
import { navigation } from './utils/navigation'
import './styles/App.css'

// 导入所有示例组件
import JsxSyntax from './examples/01-jsx-syntax/JsxSyntax'
import ComponentsAndProps from './examples/02-components-props/ComponentsAndProps'
import StateManagement from './examples/03-state-management/StateManagement'
import EventHandling from './examples/04-event-handling/EventHandling'
import ConditionalRendering from './examples/05-conditional-rendering/ConditionalRendering'
import ListsAndKeys from './examples/06-lists-keys/ListsAndKeys'
import Forms from './examples/07-forms/Forms'
import HooksAdvanced from './examples/08-hooks-advanced/HooksAdvanced'
import Routing from './examples/09-routing/Routing'
import Performance from './examples/10-performance/Performance'
import React19Features from './examples/11-react19-features/React19Features'

function App() {
  return (
    <div className="app">
      <header className="app-header">
        <h1>React 学习项目</h1>
        <p>基于 React 19 的完整学习指南</p>
      </header>

      <nav className="navigation">
        <h2>学习目录</h2>
        <ul>
          {navigation.map((item) => (
            <li key={item.id}>
              <Link to={item.path}>{item.title}</Link>
            </li>
          ))}
        </ul>
      </nav>

      <main className="main-content">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/jsx-syntax" element={<JsxSyntax />} />
          <Route path="/components-props" element={<ComponentsAndProps />} />
          <Route path="/state-management" element={<StateManagement />} />
          <Route path="/event-handling" element={<EventHandling />} />
          <Route path="/conditional-rendering" element={<ConditionalRendering />} />
          <Route path="/lists-keys" element={<ListsAndKeys />} />
          <Route path="/forms" element={<Forms />} />
          <Route path="/hooks-advanced" element={<HooksAdvanced />} />
          <Route path="/routing" element={<Routing />} />
          <Route path="/performance" element={<Performance />} />
          <Route path="/react19-features" element={<React19Features />} />
        </Routes>
      </main>

      <footer className="app-footer">
        <p>&copy; 2024 React 学习项目</p>
      </footer>
    </div>
  )
}

function Home() {
  return (
    <div className="home">
      <h2>欢迎来到 React 学习项目</h2>
      <p>这是一个基于 React 19 最新版本的完整学习项目</p>
      
      <div className="intro-section">
        <h3>学习路径</h3>
        <p>按照左侧导航的顺序学习，每个章节都包含详细的示例和说明：</p>
        <ol>
          <li><strong>JSX 语法</strong> - 学习 React 的模板语法</li>
          <li><strong>组件与 Props</strong> - 理解组件化开发</li>
          <li><strong>状态管理</strong> - 掌握 useState Hook</li>
          <li><strong>事件处理</strong> - 处理用户交互</li>
          <li><strong>条件渲染</strong> - 动态内容显示</li>
          <li><strong>列表与 Keys</strong> - 渲染列表数据</li>
          <li><strong>表单处理</strong> - 用户输入处理</li>
          <li><strong>Hooks 进阶</strong> - 高级状态管理</li>
          <li><strong>路由</strong> - 单页应用导航</li>
          <li><strong>性能优化</strong> - 提升应用性能</li>
          <li><strong>React 19 新特性</strong> - 最新功能介绍</li>
        </ol>
      </div>

      <div className="tips-section">
        <h3>学习建议</h3>
        <ul>
          <li>📚 按顺序学习每个章节</li>
          <li>🛠️ 动手修改示例代码</li>
          <li>🤔 理解每个概念背后的原理</li>
          <li>📖 查阅官方文档深入学习</li>
        </ul>
      </div>
    </div>
  )
}

export default App